import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from "react-native";

type HeaderProp = {
    title:string
}
class Header extends React.Component<HeaderProp, any> {
    render() {
        return (
            <View style={styles.header_item}>
                <Text  style={styles.header_item_font}>{this.props.title}</Text>
            </View>
        )
    }
}

type ListProp = {
    title:string
}
class List extends  React.Component<ListProp, any> {
    render() {
        return (
            <View style={styles.list_item}>
                <Text style={styles.list_item_font}>{this.props.title}</Text>
            </View>
        );
    }
}

type RNCardProp = {
    title:string,
    cards:Array<string>,
    onSelect:(index: number, card: string)=> void
}
export default class RNCard extends React.Component<RNCardProp, any>  {
    constructor(props:RNCardProp) {
        super(props);
    }

    render() {
        return (
            <View style={styles.card}>
                <Header title={this.props.title}/>
                {
                    this.props.cards.map((item, index) =>{
                        return <TouchableOpacity
                            key={'item_' + index}
                            activeOpacity={1}
                            onPress={() => {
                                this.props.onSelect(index, item)
                            }}
                        >
                            <List title={item}/>
                        </TouchableOpacity>
                    })
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    card: {
        flex: 1,

        marginLeft:10,
        minWidth:200,
        borderWidth:1,
        borderColor:'#ebeef5',
        backgroundColor:'#fff',
        overflow:'hidden',
        color:'#303133',
        boxShadow:'0 2px 12px 0 rgba(0,0,0,.1)',
        borderRadius: 8,
    },
    header_item: {
        height: 58,     //高度
        marginLeft: 16, //左边距
        marginRight:16, //右边距
        borderBottomWidth: 1, //底部边框
        borderBottomColor: '#ebeef5', //底部边框颜色
        justifyContent: 'center', //justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
        fontSize: 16, //字体大小
    },
    list_item: {
        height: 37,     //高度
        marginLeft: 16, //左边距
        marginRight:16, //右边距
        // borderBottomWidth: 1, //底部边框
        // borderBottomColor: '#ddd', //底部边框颜色
        justifyContent: 'center', //justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
    },
    list_item_font: {
        fontSize: 15, //字体大小
    },
    header_item_font: {
        fontSize: 20, //字体大小
    },
});
